<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3 id="h3">{{ title }}</h3>
      <div>
        <button @click="count--">-</button>
        <span id="count">{{ count }}</span>
        <button @click="count++">+</button>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          count: 100,
          title: '计数器',
        },
        // 创建前
        beforeCreate() {
          console.log(
            'beforeCreate - 这里数据还没有初始化，不能使用数据',
            this.count
          );
        },
        // 创建后
        created() {
          console.log(
            'created - 这个阶段，数据已经初始化完毕，响应式处理完毕，但是不能操作 DOM，因为此时还没有渲染完成',
            this.count
          );

          const h3 = document.querySelector('#h3');
          console.log(h3.outerHTML);

          this.intervalId = setInterval(() => {
            console.log('interval');
          }, 1000);
        },
        // 挂载前
        beforeMount() {
          console.log(
            'beforeMount - 这个阶段也不能操作DOM，模板还没有编译渲染完成'
          );
          const h3 = document.querySelector('#h3');
          console.log(h3.outerHTML);
        },
        // 挂载后
        mounted() {
          console.log('mounted - 这个阶段就能操作DOM了');
          const h3 = document.querySelector('#h3');
          console.log(h3.outerHTML);
        },

        // 更新前（视图更新前，异步的）
        beforeUpdate() {
          console.log(
            'beforeUpdate - 此时，数据更新了，但是模板还没有更新',
            this.count
          );
          const countSpan = document.querySelector('#count');
          console.log(countSpan.outerHTML);
        },
        // 更新后
        updated() {
          console.log('updated - 此时，视图已经更新', this.count);

          const countSpan = document.querySelector('#count');
          console.log(countSpan.outerHTML);
        },

        // 销毁前（实例销毁前）
        beforeDestroy() {
          console.log(
            'beforeDestroy - 可以在这个阶段释放资源，做清理工作，比如定时器的清除'
          );

          clearInterval(this.intervalId);
        },
        // 销毁后
        destroyed() {
          console.log('destroyed');
        },
      });
    </script>
  </body>
</html>
